<template>
  <swiper
    :slidesPerView="1"
    :spaceBetween="30"
    :pagination="isOpenPagination"
    :navigation="isOpenNavigation"
    :modules="modules"
    :loop="true"
    :autoplay="true"
    class="mySwiper wh"
  >
    <swiper-slide v-for="item in data" :key="item.id">
      <img :src="item.imgPath" alt="" class="img" />
    </swiper-slide>
  </swiper>
</template>

<script lang="ts">
export default {
  name: "swiper",
};
</script>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/pagination";
import "swiper/css/navigation";

// import required modules
import { Autoplay, Pagination, Navigation } from "swiper";
// const props = defineProps(["width", "height", "data", "isOpenPagination",'isOpenNavigation']);
const props = withDefaults(
  defineProps<{
    data: Array<any>;
    width: number;
    height: number;
    isOpenPagination?: boolean;
    isOpenNavigation?: boolean;
  }>(),
  {
    isOpenPagination: true,
    isOpenNavigation: true,
    width: 800,
    height: 900,
    data: () => [],
  }
);

const modules = [Pagination, Navigation, Autoplay];
</script>

<style scoped>
.wh {
  width: v-bind(width + "px");
  height: v-bind(height + "px");
}
.img {
  width: 100%;
  height: 100%;
}
</style>
